﻿<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>聊天界面</title>
    <link rel="stylesheet" type="text/css" href="/QQ/chat.css" />

    <script src="/QQ/js/jquery.min.js"></script>
    <script src="/QQ/js/flexible.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css" />
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
</head>
<script>
</script>
<body>
<header class="header">
    <a class="back" href="javascript:history.back()"></a>
    <h5 class="tit" id="buser"></h5>
    <div class="right" id="qingkong">清空</div>
</header>
<div class="message" >

</div>
<div class="footer">
    <img src="/QQ/images/hua.png" alt="" />
    <!--<img src="/QQ/images/xiaolian.png" alt="" />-->
    <input type="text" name="neirong" />
    <p id="fasong">发送</p>
</div>
<script>

    $(function () {

        //跳转到底部
        function toButtom() {
            var c = window.document.body.scrollHeight;
            window.scroll(0, c);
        }

        var parms = getParams();
        //查接收人的信息回显名字
        $.get("/users/"+parms.id,function (data) {
            var nickName = data.nickName;
            $("#buser").html(nickName);
        })

        var json = {};
        json.sendState = 1;
        json["receive.id"] = parms.id;
        //发送
        $("#fasong").click(function () {
            if ($("input[name='neirong']").val().trim() == "") {
                $(document).dialog({
                    type : 'notice',
                    infoText: '亲,内容不能为空',
                    autoClose: 2000,
                    position: 'bottom'
                });
            }else {
                var timee = "";
                function time() {
                    var data = new Date();
                    timee = data.getFullYear()+"-"+data.getMonth()+1+"-"+data.getDay()+" "+
                        data.getHours()+":"+data.getMinutes()+":"+data.getSeconds();
                }
                $(".time").html(time());
                var content = $("input[name='neirong']").val();
                json.content = $("input[name='neirong']").val();
                $.post("/privateMessages",json,function (data) {
                })
                var html="<div class='show'><div class='time'>" + timee + "</div><div class='msg'><img src="+headImgUrl+" />"+
                    "<p><i class='msg_input'></i>"+content+"</p></div></div>";
                upView(html);
                setTimeout(function () {
                    $("input[name='neirong']").val("");
                }, 50);
            }

        })

        $(window).keydown(function (ev) {
            if (ev.keyCode == 13) {
                $("#fasong").click();
            }
        })


        $("#qingkong").click(function () {
            $(".show").remove();
            $(".send").remove();
        })

        var  user =JSON.parse(sessionStorage.getItem("user"));
        //登录者头像
        var headImgUrl = user.headImgUrl;
        //登陆者id
        var sendId = user.id;
        //聊天对象id
        var p = getParams();
        //发送时间
        var stime;
        //发送人头像
        var sendHeadImgUrl;
        //接收时间
        var rrTime;
        var sendData=[];

        setInterval(function () {
            $.get("/privateMessages",{receiveId: p.id,sendId : sendId},function (data) {
                console.log(data);
                if (data) {
                    $.each(data,function (index,ele) {
                        rrTime = ele.sendTime;
                        sendHeadImgUrl =  ele.receive.headImgUrl;
                        send(sendHeadImgUrl,ele.content,rrTime);
                    })
                }
                toButtom()
            })
        },1800)


        //当前登陆者查询自己发送的聊天记录
        $.get("/privateMessages/"+p.id,{sendId : sendId},function (data) {
            sendData = data;
            sendData.sort(function (a,b) {
                return b.id<a.id ? 1:-1;
            });
            $.each(sendData,function (index,ele) {
                if (ele.receive.id == sendId) {
                    stime = ele.sendTime;
                    show(headImgUrl,ele.content,stime);
                }
                if(ele.receive.id == p.id){
                    rrTime = ele.sendTime;
                    sendHeadImgUrl =  ele.receive.headImgUrl;
                    send(sendHeadImgUrl,ele.content,rrTime);
                }
            })
            toButtom()
        })




        /*发送消息*/
        function send(headSrc,str,rrTime){
            var html="<div class='send'><div class='time'>" + rrTime + "</div><div class='msg'><img src="+sendHeadImgUrl+" />"+
                "<p><i class='msg_input'></i>"+str+"</p></div></div>";
            upView(html);
        }
        /*接受消息*/
        function show(headSrc,str,sstime){
            var html="<div class='show'><div class='time'>" + sstime + "</div><div class='msg'><img src="+headImgUrl+" />"+
                "<p><i class='msg_input'></i>"+str+"</p></div></div>";
            upView(html);
        }
        /*更新视图*/
        function upView(html){
            $('.message').append(html);
            $('body').animate({scrollTop:$('.message').outerHeight()-window.innerHeight},200)
        }
        function sj(){
            return parseInt(Math.random()*10)
        }

        $(function(){
            $('.footer').on('keyup','input',function(){
                if($(this).val().length>0){
                    $(this).next().css('background','#114F8E').prop('disabled',true);

                }else{
                    $(this).next().css('background','#ddd').prop('disabled',false);
                }
            })
        })


    })

</script>
</body>

</html>